<template>
	<view>
		<view class="bodyBox-t30">
			
			<uni-forms ref="valiForm" :rules="rules" :modelValue="addr">
				<uni-forms-item label="姓名" required name="name">
					<uni-easyinput v-model="addr.name" placeholder="请输入姓名" />
				</uni-forms-item>
				<uni-forms-item label="手机号" required name="phone">
					<uni-easyinput v-model="addr.phone" placeholder="请输入手机号" />
				</uni-forms-item>
				<uni-forms-item label="省市区" required name="addrs">
					<uni-easyinput v-model="addr.addrs" disabled="" @tap="showPicker" placeholder="请选择省市区" />
					<city-picker ref="picker" mode="multiSelector" :list="areaData" :level="3"
						@confirm="finishSelectAddress">
					</city-picker>
				</uni-forms-item>
				<uni-forms-item label="详细地址" required name="addrDetail">
					<uni-easyinput v-model="addr.addrDetail" placeholder="请输入详细地址" />
				</uni-forms-item>
				<uni-forms-item label="是否默认" required name="level">
					<radio-group @change="handleLevlChange">
					  <radio value="1" />
					  是
					  <radio value="0" :checked="true" />
					  否
					</radio-group>
				</uni-forms-item>
			</uni-forms>
			<button type="primary" @click="submit('valiForm')">提交</button>
		</view>
	</view>
</template>

<script>
	import cityPicker from '@/components/lb-picker'
	import district from '@/js_sdk/district.js'
	export default {
		components: {
			cityPicker
		},
		data() {
			return {
				addr: {
					id: '',
					province: '',
					city: '',
					dist: '',
					addr: '',
					addrs: '',
					userId: '',
					name: '',
					phone: '',
					level: 0,
					addrDetail: '',
					detail: ''
				},
				rules: {
					name: {
						rules: [{
							required: true,
							errorMessage: '请输入姓名',
						}, ]
					},
					phone: {
						rules: [{
							required: true,
							errorMessage: '请输入手机号',
						}, {
							pattern: '^1[3|4|5|6|7|8|9][0-9]\\d{8}$',
							errorMessage: '手机号格式错误',
						}]
					},
					addrs: {
						rules: [{
							required: true,
							errorMessage: '请输入省市区',
						}, ]
					},
					addr: {
						rules: [{
							required: true,
							errorMessage: '请输入详细地址',
						}, ]
					},
				},
				areaData: [],
				province: '',
				city: '',
				area: ''

			};
		},
		onLoad(options) {
			district.getGaoDeData('e7368cc800121420b421a4d8f3ef3033').then(res => {
				this.areaData = district.buildAppJSONData({
					addressList: res,
					noFilter: false,
					allProvince: false,
					allCity: false,
					allCountry: false
				})
			})
			if (options.id && options.id > 0) {
				this.addr.id = options.id
				this.get(options.id)
			}
		},
		onShow() {

		},
		onReady() {
			// 需要在onReady中设置规则
			this.$refs.valiForm.setRules(this.rules)
		},
		methods: {
			get(id) {
				var that = this;
				this.apis.addrDeatil({
					id: id
				}).then(res => {
					that.addr = res
					that.addr.addrs = that.addr.province + that.addr.city + that.addr.dist
					that.province = that.addr.province
					that.city = that.addr.city
					that.area = that.addr.dist
				})
			},
			handleLevlChange(e){
				var that = this;
				that.addr.level = e.detail.value;
			},
			submit(ref) {
				var that = this;
				that.$refs[ref].validate().then(res => {
					console.log('success', res);
					that.addr.province = that.province
					that.addr.city = that.city
					that.addr.dist = that.area
					that.addr.detail = that.province+that.city+that.area+that.addr.addrDetail
					that.apis.addrAddr(that.addr).then(res => {
						uni.navigateBack({})
					})

				}).catch(err => {
					console.log('err', err);
				})


			},
			showPicker() {
				this.$refs.picker.show()
			},
			finishSelectAddress(e) {
				this.province = e.item[0].label
				this.city = e.item[1].label
				this.area = e.item[2].label
				this.addr.addrs = this.province + this.city + this.area
				this.$refs.valiForm.setValue('addrs', this.province + this.city + this.area)
			},
		}

	}
</script>

<style lang="scss">

</style>
